<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.js"></script>
    <script src="js/jquery-3.3.1.js"></script>
</head>

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM--->
    <div id="main" style="width: 800px; height: 600px"></div>
    <script type="text/javascript">
        //基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.showLoading();  //设置在加载数据前，显示加载动画
        $.get("data/ch6_5_2_data_pie.json").done(function (data) {
            
                myChart.setOption({
                    color: ['red', 'blue', 'LimeGreen', 'Teal', 'Purple', 'Olive'],
                    backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1
                    tooltip: {  //配置工具箱组件
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    title: {  //配置标题组件
                    
                        text: '特色高水平专业群',  //设置主标题
                        subtext: '各专业学生人数统计',  //设置次标题
                        left: 'center', top: 8  //设置主次标题都左右居中
                    },
                    series: [  //配置数据系列
                        {
                            
                            name: '特高专业群之专业:',
                            type: 'pie',  //设置图表类型为饼图
                            
                            radius: ['45%', '75%'],  //设置饼图内外圆的半径
                            center: ['50%', '58%'],  //设置圆心的位置
                            data: data.data_pie,
                            label: {
                                fontSize: 18
                            }
                        }
                    ]
                })
        });
        myChart.hideLoading();  //加载数据完成后,隐藏加载动画
    </script>
</body>

</html>